<template>
  <div style="height: 100px;width: 100%;background-color: red" ref="refTest">
    <button @click="myConsole">click</button>
    <button @click="getMap">getMap</button>
    <boundary-child2 inline-template>
      <div v-once>
        <p>These are compiled as the component's own template.</p>
        <p>Not parent's transclusion content.</p>
      </div>
    </boundary-child2>
  </div>
</template>

<script>
  import BoundaryChild2 from './BoundaryChild2'

  export default {
    name: "BoundaryChild",
    inject: ['getMap'],
    components: {
      BoundaryChild2
    },
    methods: {
      myConsole() {
        console.log(this.$root.msg)
        console.log(this.$parent.msg)
        console.log(this.$refs.refTest.clientWidth)
      }
    },
    mounted() {
      this.$on('emitData', () => {
        console.log('emitData')
      })
      setTimeout(()=>{
        console.log('in mounted before')
        this.$forceUpdate()
        console.log('in mounted after')
      },5000)
    }
  }
</script>

<style scoped>

</style>
